<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '班级动态',
	},
}
</route>

<template>
	<view class="page-class">
		<fly-navbar leftText="班级动态" fixed />
		<view class="w-full box-border" :style="{ height: contentHeight + 'rpx' }">
			<scroll-view
				class="w-full h-full box-border"
				scroll-y
				v-if="thisPage === 1 && classMessageList.length"
				@scrolltolower="scrolltolower"
				:throttle="false"
			>
				<view class="w-full px-4 mb-6 box-border">
					<view
						class="rounded-[30rpx] mt-3 px-3 py-3 w-full box-border flex justify-between flex-col active-item"
						v-for="(item, index) in classMessageList"
					>
						<view class="text-[26rpx] text-[#303030]" v-if="item.model == 5"
							>我已经读完了<text
								class="text-[#34A4E2]"
								@tap="toLink('/pages-book/details/index?id=' + item.object_id)"
							>
								《{{ item.remark }}》</text
							>
							，获得了<text class="text-[#FFA530]">{{ item.integral }}</text
							>积分，你也来试试吧！</view
						>
						<view class="text-[26rpx] text-[#303030]" v-else-if="item.model == 6"
							>我已经读完了<text
								class="text-[#34A4E2]"
								@tap="toLink('/pages-book/details/index?id=' + item.object_id)"
								>倍阅读共读计划： {{ item.remark }}</text
							>，获得了<text class="text-[#FFA530]">{{ item.integral }}</text
							>积分，你也来试试吧！</view
						>
						<view class="text-[26rpx] text-[#303030]" v-else
							>我已经读完了<text
								class="text-[#34A4E2]"
								@tap="toLink('/pages-book/details/index?id=' + item.object_id)"
								>班级共读计划：{{ item.remark }}</text
							>，获得了<text class="text-[#FFA530]">{{ item.integral }}</text
							>积分，你也来试试吧！</view
						>
						<!-- <view class="text-[26rpx] text-[#303030]">{{ item.message }}</view> -->
						<view class="w-full flex justify-between items-center mt-4">
							<view class="flex items-center">
								<image
									:src="
										item.avatar ||
										'https://breadbook.oss-cn-hangzhou.aliyuncs.com/static/student4.png'
									"
									class="w-[48rpx] h-[48rpx] rounded-[50%] ml-2 border-1 border-solid border-[#f1f1f1]"
								></image>
								<text class="text-[28rpx] text-[#303030] ml-2">{{ item.student_name }}</text>
							</view>
							<text class="text-[25rpx] text-[#919191]">{{ item.created_at }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<no-page
				v-if="thisPage === 0 || (thisPage === 1 && !classMessageList.length)"
				height="100%"
				:type="thisPage === 0 ? 'btn' : 'msg'"
				:title="title"
				@click="retry"
			></no-page>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import auth from '@/utils/auth';
import { ref, onMounted } from 'vue';
import { useUserStore } from '@/store';
import { systemInfo } from '@/utils/getSystemInfo';
import { editClassApi, getClassMessageApi } from '@/service/class';
import dayjs from 'dayjs';
import { toAuthPage } from '@/utils/jump';
import onShare from '@/hooks/useShare';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();
const thisPage = ref(-1);
const page = ref({ number: 1, size: 10 });
const title = ref('');
const { contentHeight } = systemInfo();
const toLink = url => {
	if (!url) return;
	uni.navigateTo({
		url,
	});
};

const hasMore = ref(true);
const scrolltolower = () => {
	console.log(2222);
	if (!hasMore.value) return;
	page.value.number++;
	getClassMessageList(
		page.value.number,
		userInfo.value.class_list[currentClassNum.value.currindex].class_id,
	);
};

const retry = () => {
	hasMore.value = true;
	page.value = { number: 1, size: 10 };
	getClassMessageList(
		page.value.number,
		userInfo.value.class_list[currentClassNum.value.currindex].class_id,
	);
};
const toUrl = (url: string) => {
	console.log('========>url', url);
	if (!url) return;
	closeSpecs1();
	closeSpecs();
	if (!auth.getLoginStatus()) toAuthPage();

	uni.navigateTo({ url });
};
const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);

const { statusBarHeight, navHeight } = systemInfo();
const barAlbright = ref(0);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const popup = ref(null);
const showAddPopup = ref(false);
function openSpecs() {
	popup.value.open();
}

function closeSpecs() {
	popup.value.close();
}
const popup1 = ref(null);
function openSpecs1() {
	currentClassNum.value.class_id =
		userInfo.value.class_list[currentClassNum.value.currindex].class_id;
	currentClassNum.value.class_name =
		userInfo.value.class_list[currentClassNum.value.currindex].class_name;
	popup1.value.open();
}
function closeSpecs1() {
	popup1.value.close();
	newClassName.value = '';
}

const currentClassNum = ref({
	currindex: 0,
	class_id: 0,
	class_name: '',
});
const setCurrentClassNum = () => {
	currentClassNum.value.currindex = 0;
	currentClassNum.value.class_id =
		userInfo.value.class_list.length > 0 ? userInfo.value.class_list[0].class_id : 0;
	currentClassNum.value.class_name =
		userInfo.value.class_list.length > 0 ? userInfo.value.class_list[0].class_name : '';
};

const classMessageList = ref([]);
const getClassMessageList = async (page: number, id: number) => {
	uni.showLoading({ title: '加载中...' });
	try {
		const res = await getClassMessageApi(page, id);
		uni.hideLoading();
		if (res.status_code === 200) {
			thisPage.value = 1;
			const resData: any = res.data;
			classMessageList.value = resData.list;
			//console.log('========>getPartBookList', partBookList.value);
			if (resData.list.length < 10) {
				hasMore.value = false;
			}
			if (!classMessageList.value.length) {
				title.value = '暂无数据';
			}
		} else {
			thisPage.value = 0;
			title.value = res.message;
		}
	} catch (error) {
		uni.hideLoading();
		thisPage.value = 0;
		title.value = '服务器异常';
	}
};

const toRoster = () => {
	uni.navigateTo({
		url: `/pages/class/roster/index?class_id=${currentClassNum.value.class_id}`,
	});
};

const newClassName = ref('');
const textChange = (event: any) => {
	newClassName.value = event.detail.value;
};
const editClass = async () => {
	try {
		const res = await editClassApi(currentClassNum.value.class_id, newClassName.value);
		if (res.status_code === 200) {
			uni.showToast({
				title: '修改成功',
				icon: 'none',
			});
			currentClassNum.value.class_name = newClassName.value;
			userInfo.value.class_list[currentClassNum.value.currindex].class_name = newClassName.value;
			closeSpecs1();
			newClassName.value = '';
		} else {
			uni.showToast({
				title: res.message || '修改失败',
				icon: 'none',
			});
		}
	} catch (error) {
		console.log('========>editClasserror', error);
		uni.hideLoading();
		uni.showToast({
			title: error.data.message || '修改失败',
			icon: 'none',
		});
	}
};

onShow(() => {
	barAlbright.value = navHeight + statusBarHeight;
	setCurrentClassNum();

	auth
		.getUserInfoByToken()
		.then((res: any) => {
			console.log('=======>userInfo', userInfo.value);
			if (res.class_list.length == 0) {
				showAddPopup.value = true;
			} else {
				showAddPopup.value = false;
				// getClassInfo(userInfo.value.class_list[currentClassNum.value.currindex].class_id);
				// getClassBookRateList(
				// 	userInfo.value.class_list[currentClassNum.value.currindex].class_id,
				// 	10,
				// );
				// getStudentRateList(userInfo.value.class_list[currentClassNum.value.currindex].class_id, 10);
				getClassMessageList(1, userInfo.value.class_list[currentClassNum.value.currindex].class_id);
			}
		})
		.catch(error => {
			showAddPopup.value = true;
			uni.showToast({
				title: error.data.message || '获取失败',
				icon: 'none',
			});
		});
});
</script>
<style lang="scss">
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}
.page-class {
	width: 100%;
	height: 100vh;
}

.wx-swiper-dots .wx-swiper-dot {
	width: 10rpx;
	height: 10rpx;
	border-radius: 50%;
	background: #c6c6c8;
}

.swiper .wx-swiper-dot.wx-swiper-dot-active {
	width: 40rpx !important;
	height: 10rpx !important;
	border-radius: 10rpx !important;
	background: #909192 !important;
}
</style>
<style lang="scss" scoped>
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}

.class-topBox {
	position: relative;
	z-index: 1;
	margin: 150rpx 0 40rpx;
}

.class_swiperBox {
	background-color: rgb(255 255 255 / 100%);
	border-radius: 20rpx;
	box-shadow:
		0 0 4px 0 rgb(0 0 0 / 3%),
		0 7px 30px 0 rgb(0 0 0 / 7%);
}

.class-touxiang {
	width: 100rpx;
	height: 100rpx;
	margin-right: 10rpx;
	border: 4px solid #f7ce32;
	border-radius: 50%;
}

.class-student {
	width: 47rpx;
	height: 47rpx;
	margin-right: 10rpx;
	background: #c3c3c3;
	border-radius: 50%;
}

.student-process {
	height: 66rpx;
	background-color: rgb(243 243 245 / 80%);
	border-radius: 30rpx;
	box-shadow:
		0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
		0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
}

.items-tips {
	background: #f3f3f5;
	border-radius: 30rpx;
}

.items-back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 63rpx;
	height: 63rpx;
	background: #f3f3f5;
	border-radius: 50rpx;
}

.plan-item {
	box-shadow:
		0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
		0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
}

.active-item {
	background-color: #f9f9fb;
}

.class-login-btn {
	background: #f4c421;
}

.class-BtnLs {
	background: #2ba5e0;
}

.container2 {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: center;
	width: 662rpx;
	padding: 29rpx 12rpx 40rpx;
	margin: 29rpx 5rpx 0 0;
	background-color: rgb(255 255 255 / 100%);
	border-radius: 45rpx;
	box-shadow: 0 7rpx 30rpx 0 rgb(0 0 0 / 7%);
}

.wrapper1 {
	display: flex;
	flex-direction: column;
	align-self: flex-end;
	justify-content: flex-start;
	width: 500rpx;
	overflow: hidden;
}

.title2 {
	align-self: left;
	margin-left: 10rpx;
	font-size: 30rpx;
	font-style: normal;
	line-height: 50rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: calc(100% - 10rpx);
}

.group1 {
	display: flex;
	flex-direction: row;
	align-self: left;
	justify-content: flex-start;
	width: 500rpx;
}

.captionWrapper {
	display: flex;
	flex-direction: row;
	align-self: flex-start;
	justify-content: center;
	width: 100rpx;
	padding: 6rpx 12rpx;
	margin-top: 10rpx;
	background-color: rgb(43 165 223 / 100%);
	border-radius: 10rpx;
}

.captionWrapper1 {
	display: flex;
	flex-direction: row;
	align-self: flex-start;
	justify-content: center;
	width: 100rpx;
	padding: 6rpx 12rpx;
	margin-top: 10rpx;
	background-color: #f4c421;
	border-radius: 10rpx;
}

.caption {
	align-self: flex-start;
	overflow: hidden;
	font-size: 22rpx;
	font-style: normal;
	line-height: 30rpx;
	color: rgb(255 255 255 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.caption1 {
	align-self: flex-start;
	margin-left: 12rpx;
	font-size: 23rpx;
	font-style: normal;
	line-height: 60rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
}

.title3 {
	align-self: flex-start;
	max-width: 180rpx;
	margin: 72rpx 0 0 2rpx;
	overflow: hidden;
	font-size: 36rpx;
	font-style: normal;
	line-height: 78rpx;
	color: rgb(51 163 225 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: pre;
}

.wrapper2 {
	display: flex;
	flex-direction: column;
	align-self: flex-end;
	justify-content: flex-start;
	width: 120rpx;
	height: 120rpx;
	padding: 0;
	margin: 0 0 20rpx 20rpx;
	overflow: hidden;
	background-color: #2ba5df;
	border-radius: 120rpx;
}

.caption2 {
	align-self: center;
	max-width: 147rpx;
	margin-top: 14rpx;
	overflow: hidden;
	font-size: 28rpx;
	font-style: normal;
	line-height: 40rpx;
	color: #fff;
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.caption3 {
	align-self: center;
	max-width: 157rpx;
	margin: 0 0 0 1rpx;
	overflow: hidden;
	font-size: 30rpx;
	font-style: normal;
	line-height: 36rpx;
	color: #fff;
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.title7 {
	align-self: center;
	font-size: 30rpx;
	font-style: normal;
	line-height: 60rpx;
	color: rgb(51 163 225 / 100%);
	text-align: left;
	text-decoration: none;
	letter-spacing: -0.72rpx;
	white-space: pre;
}

.row1 {
	float: left;
	width: 710rpx;
}

.colItem01 {
	float: left;
	width: 200rpx;
	padding: 25rpx 12rpx 23.5rpx;
	margin: 30rpx 20rpx 44rpx 0;
	background-color: #fff;
	border-radius: 45rpx;
	box-shadow: 0 7rpx 30rpx rgb(0 0 0 / 7%);
}

.image {
	margin: 0 calc((100% - 140rpx) / 2);
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;
	float: left;
}

.caption10 {
	float: left;
	text-align: center;
	width: 100%;
	margin: 23rpx 0 0 1rpx;
	overflow: hidden;
	font-size: 25rpx;
	font-style: normal;
	line-height: 25rpx;
	color: rgb(48 48 48 / 100%);
	text-decoration: none;
	text-overflow: ellipsis;
	letter-spacing: -0.68rpx;
	white-space: nowrap;
}

.caption11 {
	float: left;
	text-align: center;
	width: 100%;
	margin: 17.5rpx 0 0 1rpx;
	overflow: hidden;
	font-size: 22rpx;
	font-style: normal;
	line-height: 22rpx;
	color: rgb(48 48 48 / 100%);
	text-decoration: none;
	text-overflow: ellipsis;
	letter-spacing: -0.6rpx;
	white-space: nowrap;
}

.gridBox {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: space-between;
	width: 710rpx;
	margin-top: 29rpx;
}

.colItem1 {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: flex-start;
	width: 215rpx;
	height: 285rpx;
	padding: 32rpx 12rpx 24.5rpx;
	background-color: #fff;
	border-radius: 20rpx;
	box-shadow: 0 7rpx 30rpx rgb(0 0 0 / 7%);
}

.itemWrapper {
	position: relative;
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: flex-start;
	width: 210rpx;
}

.item {
	align-self: flex-start;
	width: 208rpx;
	height: 240rpx;
	border-radius: 20rpx;
	margin-left: 1rpx;
}

.view1 {
	position: absolute;
	bottom: 60rpx;
	left: 50%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 120rpx;
	height: 120rpx;
	padding: 0;
	background-color: rgb(43 165 223 / 90%);
	border-radius: 120rpx;
	transform: translate(-50%);
}

.title11 {
	align-self: flex-start;
	width: 120rpx;
	margin-top: 20rpx;
	overflow: hidden;
	font-size: 30rpx;
	font-style: normal;
	line-height: 42rpx;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.title12 {
	align-self: center;
	width: 120rpx;
	margin: 0 0 0 1rpx;
	overflow: hidden;
	font-size: 28rpx;
	font-style: normal;
	line-height: 32rpx;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.address {
	align-self: center;
	max-width: 241rpx;
	margin: 15.5rpx 0 0 3rpx;
	overflow: hidden;
	font-size: 25rpx;
	font-style: normal;
	line-height: 32rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	letter-spacing: -0.68rpx;
	white-space: nowrap;
}

.class_tabBox {
	position: absolute;
	top: -100rpx;
	left: 32rpx;
	z-index: 2;
	width: 686rpx;
	height: 100rpx;
	overflow: hidden;
}

.class_tabBox_a {
	float: left;
	width: auto;
	height: 80rpx;
	padding: 0 20rpx;
	margin-top: 20rpx;
	line-height: 80rpx;
	color: #ababab;
	background-color: #e7e8ea;
	border-top-right-radius: 20rpx;
}

.class_tabBox_aHov {
	float: left;
	width: auto;
	height: 100rpx;
	padding: 20rpx 20rpx 0;
	margin-top: 0;
	line-height: 80rpx;
	color: #474747;
	background-color: #fff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	box-shadow:
		0 0 4px rgb(0 0 0 / 3%),
		0 7px 30px rgb(0 0 0 / 7%);
}

.class_rightBox {
	float: right;
	width: auto;
	height: 80rpx;
	padding: 0 30rpx;
	margin-top: 20rpx;
	margin-right: 50rpx;
	background-color: #e7e8ea;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
}

.class_rightBox image {
	float: left;
	width: 34rpx;
	height: 34rpx;
	margin-top: 23rpx;
	margin-right: 10rpx;
}

.class_rightBox text {
	float: left;
	font-size: 30rpx;
	line-height: 80rpx;
	color: #ababab;
}
.class-item-wrap {
	:deep(.uv-scroll-list) {
		width: 100%;
	}
	.overlayer {
		margin-right: 10rpx;
		word-break: keep-all;
	}
}
</style>
